<template>
  <div class=" bg-blue-400 w-full h-full overflow-hidden rounded-xl">
    <div id="baidu_map" class=" h-full w-full"> 
      
    </div>
  </div>
</template>

<script lang="ts" setup >
import { nextTick, onMounted, reactive, toRefs } from 'vue'
import BaiduMap from 'vue-baidu-map'
import { getPoints } from 'api'
import { ElMessage, ElMessageBox } from 'element-plus'

let map
const initMap = () => {
  let bdmap = new BMapGL.Map("baidu_map")
  bdmap.centerAndZoom(new BMapGL.Point(114.604742, 38.034942), 15)
  bdmap.enableScrollWheelZoom(true) // scroll-zoom
  bdmap.setHeading(64.5)
  bdmap.setTilt(73)
  return bdmap
}
onMounted(async ()=>{
  map = initMap()
  await nextTick()
  const { points } = await getPoints()
  for(let item of points){
    const { x,y,title } = item
    const point = new BMapGL.Point(x, y) 
    const marker = new BMapGL.Marker(point,{ title })
    marker.addEventListener('click',(e)=>{
      map.panTo(new BMapGL.Point(x,y))
      ElMessageBox.alert(`这是“${title}”`,{
        title:'Hello, World!',
        closeOnClickModal:true,
        closeOnPressEscape:true
      })
    })
    map.addOverlay(marker)
  }
})

</script>